
import React from 'react';
import { View, Image } from 'react-native';
import ViewShot from 'react-native-view-shot';
import { Lt, Color, Label, Jpp, Jx, Cimage, Fimage, Dialog, Images, ImagePt } from "../_utils";
import { ViewScale } from '../_util';
import { ViewGoodsContentForCombine } from './ApplyGoods';
import { cShare } from '../_share';


export class ShareCombine extends React.PureComponent{
    constructor(props){
        super(props);
        this.shot = null;
        this.onShotRef = this.onShotRef.bind(this);
        this.onLoadEnd = this.onLoadEnd.bind(this);
        // 2;
        this.finishCount = 1;
        setTimeout(()=>{
            this.onLoadEnd();
        }, this.props.delta || 200);
        this.didMount = false;
    }
    componentDidMount(){
        this.didMount = true;
        if(this.shot && this.finishCount <= 0){
            this.onShot();
        }
    }
    onShotRef(ref){
        this.shot = ref;
        if(ref && this.finishCount <= 0 && this.didMount){
            this.onShot();
        }
    }
    onLoadEnd(){
        if(--this.finishCount <= 0 && this.shot && this.didMount){
            this.onShot();
        }
    }
    onShot(){
        const { onShot } = this.props;
        if(!onShot){
            return;
        }
        cShare.promiseCapture(this.shot).then(image=>{
            onShot(image);
        })
    }
    render(){
        // qrcode
        const {style, data, image} = this.props;
        let { edge } = this.props;
        const ipt = ImagePt.erweima_bg;
        if(Jx.isUndefined(edge)){
            edge = Lt.pad;
        }
        return <ViewShot
            style={{padding:edge, backgroundColor:Color.back, ...style}} 
            ref={this.onShotRef}
        >
            <ViewGoodsContentForCombine style={{paddingHorizontal:edge}} data = {data}/>
            <Cimage
                uri={image}
                style={{width:Jpp.width - edge * 2, height:Jpp.width - edge * 2, marginTop:5, marginBottom:5, alignSelf:"center"}}
                // onLoadEnd={this.onLoadEnd}
            />
            {/* <ViewScale ipt = {ipt} style={{alignSelf:"center", marginHorizontal:edge}}> 
                <View style={{width:ipt.w, height:ipt.h}}>
                    <Image source={Images.erweima_bg}/>
                    <View style={{position:"absolute", left:250, top:5}} >
                        <Fimage 
                            uri={qrcode}
                            style={{width:90, height:90}} 
                            onLoadEnd={this.onLoadEnd}
                        />
                    </View>

                </View>
            </ViewScale> */}
        </ViewShot>
    }
}